<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .father {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
        }
        
        .son {
            position: absolute;
            top: 25px;
            right: 25px;
            width: 150px;
            height: 150px;
            background-color: purple;
            color: #fff;
            line-height: 150px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>

    <script>
        // 事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流
        // 注意:（1）js代码中只能执行捕获或者冒泡其中的一个阶段
        //       (2）onclick 和 attchment 只能得到冒泡阶段
        //       (3) addEventListener(type,listener[,useCapture]) 第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false（不写就默认是false)，表示在事件冒泡阶段调用事件处理程序
        var son = document.querySelector('.son');
        // 1.捕获阶段：body -> father -> son
        son.addEventListener('click', function() {
            alert('son');
        }, true)

        var father = document.querySelector('.father');
        // 捕获阶段：body -> father -> son
        father.addEventListener('click', function() {
            alert('father');
        }, true)

        // 上述两段程序运行时会发现先弹出 father 再弹出 son
        // 说明确实是在捕获阶段调用事件处理程序


        // 2.冒泡阶段；son -> father ->body -> html -> document
        son.addEventListener('click', function() {
            alert('son');
        }, false);

        var father = document.querySelector('.father');
        //冒泡阶段；son -> father ->body -> html -> document
        father.addEventListener('click', function() {
            alert('father');
        }, false);

        document.addEventListener('click', function() {
            alert('document');
        }, false);

        // 上述三段程序运行时会发现先弹出 son 再弹出 father 最后弹出 document
        // 说明确实是在捕获阶段调用事件处理程序

        // 总结: 1. 在实际开发过程中我们很少使用事件捕获，我们更关注事假冒泡
        //       2. 有些事件是没有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave
        //       3. 事件冒泡有时候会带来麻烦，有时候又可以帮助很巧妙的做某些事情，我们后面讲解
    </script>

</body>

</html>